<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  },
  type: {
    type: String as () => 'login' | 'register',
    default: 'login'
  }
})

const emit = defineEmits(['close'])

// 根据类型显示不同的标题和提示
const getTitle = () => props.type === 'login' ? '微信扫码登录' : '微信扫码注册'
const getTip = () => props.type === 'login' ? 
  '请使用微信扫描二维码登录' : 
  '请使用微信扫描二维码完成注册'

// 模拟轮询检查状态
const checkStatus = () => {
  // TODO: 实现实际的状态检查逻辑
  console.log(`检查${props.type}状态...`)
}
</script>

<template>
  <div v-if="isOpen" class="qr-modal-overlay" @click="emit('close')">
    <div class="qr-modal-container" @click.stop>
      <div class="qr-header">
        <h2>{{ getTitle() }}</h2>
        <button class="close-btn" @click="emit('close')">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="qr-content">
        <div class="qr-wrapper">
          <img src="https://via.placeholder.com/180" alt="微信二维码" class="qr-code" />
          <div class="qr-overlay">
            <i class="fa fa-refresh"></i>
            <span>二维码已过期，点击刷新</span>
          </div>
        </div>
        <p class="qr-tip">{{ getTip() }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.qr-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
}

.qr-modal-container {
  background-color: white;
  border-radius: 8px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.qr-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qr-header h2 {
  font-size: 18px;
  color: #333;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  font-size: 18px;
}

.close-btn:hover {
  color: #666;
}

.qr-content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-wrapper {
  position: relative;
  width: 180px;
  height: 180px;
  margin-bottom: 16px;
}

.qr-code {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #eee;
  border-radius: 4px;
}

.qr-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.qr-overlay.expired {
  opacity: 1;
  visibility: visible;
}

.qr-overlay i {
  font-size: 24px;
  color: #666;
}

.qr-overlay span {
  font-size: 14px;
  color: #666;
  text-align: center;
}

.qr-tip {
  font-size: 14px;
  color: #666;
  margin: 0;
}

@media (max-width: 768px) {
  .qr-modal-container {
    margin: 16px;
  }
  
  .qr-content {
    padding: 20px;
  }
}
</style> 